<template>
    <div class="app-container">
        <el-form :model="searchForm" inline ref="searchForm" label-width="90px">
            <el-form-item label="请求时间：">
                <el-date-picker size="small" v-model="searchForm.beginTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请求开始时间"></el-date-picker>
                <el-date-picker size="small" v-model="searchForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请求结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" size="small" @click="init('search')">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="header" label="请求头" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="method" label="请求方式" align="center" width="120"></el-table-column>
            <el-table-column prop="param" label="参数" show-overflow-tooltip align="center" width="120"></el-table-column>
            <el-table-column prop="requestUrl" label="请求地址" align="center"></el-table-column>
            <el-table-column prop="responseResult" label="请求结果" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="nickName" label="用户" align="center"></el-table-column>
            <el-table-column prop="beginTime" label="请求开始时间" align="center" width="160"></el-table-column>
            <el-table-column prop="endTime" label="请求结束时间" align="center" width="160"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button @click.stop="detailClick(scope.row)" plain size="mini">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements" style="padding-top: 20px"></el-pagination>
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="120px" style="margin: 0px 50px;">
                <el-form-item label="请求头：" prop="header">
                    <el-input v-model="dataForm.header" type="textarea" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="请求方式：" prop="method">
                    <el-input v-model="dataForm.method"></el-input>
                </el-form-item>
                <el-form-item label="参数：" prop="param">
                    <el-input v-model="dataForm.param" type="textarea" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="请求地址：" prop="requestUrl">
                    <el-input v-model="dataForm.requestUrl"></el-input>
                </el-form-item>
                <el-form-item label="请求结果：" prop="responseResult">
                    <el-input v-model="dataForm.responseResult" type="textarea" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="用户：" prop="nickName">
                    <el-input v-model="dataForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="请求开始时间：" prop="beginTime">
                    <el-input v-model="dataForm.beginTime"></el-input>
                </el-form-item>
                <el-form-item label="请求结束时间：" prop="endTime">
                    <el-input v-model="dataForm.endTime"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { findInterfaceLogRecord, getInterfaceLog } from '@/api/user-management/sys-log'
import { findApplication } from '@/api/application/application'

export default {
    name: 'InterfaceLog',
    data() {
        return{
            searchForm: {
                beginTime: '',
                endTime: ''
            },
            dataForm: {},
            tableData: [],
            pageSize: 10,
            nowPage: 0,
            pageData: {},
            applicationIdOpt: [],
            showDialog: false
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            findInterfaceLogRecord(_this.nowPage, _this.pageSize,_this.searchForm.beginTime,_this.searchForm.endTime).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object;
                    _this.tableData = response.object.content
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        //详情
        detailClick(row){
            this.dataForm = row
            this.showDialog = true
        }
    }
}
</script>
